<template>
    <div id="PermissionDetail">
        <div class="container">
            <div class="table-wrap">
                <div class="table-right">
                    <div class="group-item">
                        <div class="group-top">
                            <span class="title">角色</span>
                            <span class="edit-btn" @click="showDialog">修改</span>
                        </div>
                        <ul class="group-user">
                            <li>{{ name }}</li>
                        </ul>
                    </div>
                    <div class="group-item">
                        <div class="group-top">
                            <span class="title" style="font-size:16px;">配置角色权限</span>
                        </div>
                        <a-tabs :default-active-key="activeName">
                            <!-- <a-tab-pane v-for="item in menuList" :key="item.power_id" :tab="item.power_name"> -->
                            <a-tab-pane v-for="(item, index) in menuList" :key="index" :name="index + ''" :tab="item.power_name">
                                <Cascader
                                    :props="{ label: 'power_name', children: 'sub_power', checked: 'show_menu' }"
                                    :data="item"
                                />
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                    <a-button type="primary" @click="changePermissions">保存</a-button>
                </div>
            </div>
        </div>
        <CommonDialog
            title="修改角色"
            :visible="dialog.visible"
            :form="dialog.form"
            :rows="dialog.rows"
            :labelWidth="80"
            @hideDialog="dialog.visible = false"
            @confirm="onDialogSubmit">
        </CommonDialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class PermissionDetail extends Vue {
    loading: boolean = true
    menuList: any[] = []
    checks: any = {}
    data: any = {}
    dialog: any = {
        visible: false,
        form: { name: '' },
        rows: {
            'name': {
                label: '角色名',
                prop: 'name',
                rules: [
                    {required: true, message: '请输入文字内容', trigger: 'blur'}
                ]
            }
        }
    }
    activeName: any = '0'

    get roleId () {
        return this.$route.query.role_id
    }
    get name () {
        return this.$route.query.name
    }

    init () {
        this.getMenuList();
    }
    // 角色权限列表
    async getMenuList () {
        const res = await this.$api.adminRolePowerListFetch({ roleId: this.roleId })
        this.menuList = res.data;
        // this.initValue()
        this.activeName = '0'
        this.loading = false;
    }
    initValue () {
        this.checks = {}
        this.menuList.forEach(item => {
            this.checks[item.powerId] = []
            item.sub_power && item.sub_power.forEach((child: any) => {
                child.show_menu && child.sub_power && child.sub_power.forEach((sub: any) => {
                    sub.show_menu && !sub.sub_power && this.checks[item.powerId].push([child.powerId, sub.powerId])
                    sub.show_menu && sub.sub_power && sub.sub_power.forEach((power: any) => {
                        power.show_menu && this.checks[item.powerId].push([child.powerId, sub.powerId, power.powerId])
                    })
                })
            })
        })
    }
    // 修改权限
    changePermissions () {
        let userInfo: any = JSON.parse(localStorage.getItem('userInfo') as string)
        console.log('修改权限', this.menuList)
        let powerIds = this.$util.flatten(this.menuList, 'sub_power').filter((item: any) => item.show_menu).map((item: any) => item.power_id)
        if (!powerIds.length) {
            return this.$message.error('至少勾选一项')
        }
        this.$api.adminRoleUpdatePowerFetch({
            roleId: this.roleId,
            powerIds: powerIds.join(',')
        }).then((res: any) => {
            this.$message.success('修改角色权限成功')
            if (this.roleId === userInfo.roleId) {
                setTimeout(() => {
                    this.$message.info('请重新登录')
                    localStorage.removeItem('userInfo')
                    localStorage.removeItem('sessionId')
                    this.$router.replace('/login')
                }, 1000);
            }
        })
    }
    // 编辑角色
    showDialog () {
        this.dialog.form.name = this.name
        this.dialog.visible = true
    }
    // 更新
    onDialogSubmit () {
        this.$api.adminRoleUpdateRoleFetch({
            roleId: this.roleId,
            name: this.dialog.form.name
        }).then((res: any) => {
            this.$message.success('修改角色成功')
            this.data.name = this.dialog.form.name
            this.dialog.visible = false
            this.$router.replace({query: {roleId: this.roleId, name: this.dialog.form.name}})
        })
    }
}
</script>

<style lang="scss">
#PermissionDetail {
    .table-wrap {
        padding-top: 5px;
        .table-right {
            .group-item {
                margin: 25px 0;
                padding: 0 0px 10px 10px;
                border-bottom: 1px solid #e7e6eb;
                &::after {
                    content: '';
                    display: block;
                    clear: both;
                }
                .group-top {
                    margin: 0 0 15px;
                    .edit-btn {
                        color: #4b9eed;
                        margin: 0 0 0 20px;
                        cursor: pointer;
                    }
                }
                .group-name {
                    color: grey;
                }
                .group-user {
                    li {
                        float: left;
                        background-color: #eee;
                        height: 24px;
                        line-height: 24px;
                        margin: 0 10px 5px 0;
                        padding: 0 10px;
                    }
                }
                .group-store {
                    li {
                        width: 100%;
                        height: 24px;
                        line-height: 24px;
                        margin: 0 10px 5px 0;
                    }
                }
            }
        }
    }
}
</style>
